<template>
  <el-dialog
    class="system-upload-model"
    append-to-body
    :title="title"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(700)"
    :before-close="handleCancel">
    <el-form
      class="form-container"
      :model="form"
      ref="form"
      :rules="rules"
      :label-width="$setRem(120)">
      <el-form-item class="form-item-left" label="体系文件名称" prop="dataName" required>
        <el-input placeholder="请输入" v-model="form.dataName"></el-input>
      </el-form-item>
      <el-form-item label="" class="form-item-right" prop="dataFileUrl">
        <div v-if="form.dataFileUrl" class="file-list">
          <span class="file-name">{{ file.name }}</span>
          <i class="el-icon-delete" @click="hanldeRemove"></i>
        </div>
        <el-upload
          v-else
          class="upload-qualifications"
          ref="upload"
          action="#"
          :on-change="handleUpload"
          :show-file-list="false"
          :auto-upload="false">
          <el-button :loading="btnLoading" slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item class="form-item-left" label="体系图" prop="dataImagesUrl" required>
        <div v-if="form.dataImagesUrl" class="image-list">
          <div class="mask">
            <i class="el-icon-delete" @click="handleRemovePic"></i>
          </div>
          <img :src="dataImagesUrl" class="avatar" />
        </div>
        <el-upload
          v-else
          class="avatar-uploader"
          action="#"
          accept=".jpg,.png,.jpeg"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="beforeAvatarUpload">
          <i v-if="picLoading" class="el-icon-loading avatar-loading-icon"></i>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item class="form-item-right" label="内容简介" prop="dataDesc">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          v-model="form.dataDesc">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleCancel">取 消</el-button>
      <el-button
        class="success"
        type="primary"
        :loading="loading"
        @click="handleSubmit">
        提 交
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '文件上传'
    },
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      btnLoading: false,
      picLoading: false,
      file: {},
      form: {
        // 内容简介
        dataDesc: '',
        // 体系文件名称
        dataName: '',
        dataImagesUrl: '',
        dataFileUrl: ''
      },
      rules: {
        dataName: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入文件名称'
          }
        ],
        dataImagesUrl: [
          {
            required: true,
            message: '请上传体系图'
          }
        ]
      }
    };
  },
  computed: {
    dataImagesUrl() {
      return this.$checkUrl(this.form.dataImagesUrl);
    }
  },
  watch: {
    visible(val) {
      if (!val) {
        this.form = {
          dataDesc: '',
          dataName: '',
          dataImagesUrl: '',
          dataFileUrl: ''
        };
        this.file = {};
      }
    }
  },
  methods: {
    // 上传文件
    async handleUpload(file) {
      this.file = file.raw;
      const fm = new FormData();
      fm.append('file', file.raw);
      this.btnLoading = true;
      const { success, data: { data }} = await this.$Model.fileUpload(fm);
      this.btnLoading = false;
      if (success) {
        this.form.dataFileUrl = data;
      }
    },
    // 删除文件
    hanldeRemove() {
      this.file = {};
      if (!this.form.dataFileUrl) return;
      this.form.dataFileUrl = '';
      const params = {
        filePath: this.form.dataFileUrl
      };
      this.$Model.fileDelete(params, { showErr: false });
    },
    // 上传图片
    async beforeAvatarUpload(file) {
      const fm = new FormData();
      fm.append('file', file.raw);
      this.picLoading = true;
      const { success, data: { data }} = await this.$Model.fileUpload(fm);
      this.picLoading = false;
      if (success) {
        this.form.dataImagesUrl = data;
      }
    },
    // 删除图片
    async handleRemovePic(file) {
      if (!this.form.dataImagesUrl) return;
      this.form.dataImagesUrl = '';
      const params = {
        filePath: this.form.dataImagesUrl
      };
      this.$Model.fileDelete(params, { showErr: false });
    },
    // 提交
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submit', this.form);
          return;
        }
        this.$emit('submit', false);
      });
    },
    // 取消
    handleCancel() {
      this.$emit('cancel', false);
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';

  .system-upload-model {
    .form-container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      /deep/ .el-form-item {
        margin-bottom: 50px;
        .el-form-item__label {
          color: #fff;
        }
        .file-list {
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;
          background: $baseBg;
          border-radius: 8px;
          &:hover {
            color: $mainColor;
          }
          .file-name {
            width: calc(100% - 40px);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          i {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            &.el-icon-paperclip {
              margin-right: 10px;
            }
          }
        }
        .avatar-uploader {
          .el-upload {
            position: relative;
          }
        }
        .image-list {
          width: 100%;
          height: 100%;
          position: relative;
          transition: all .3s;
          .mask {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            cursor: pointer;
            text-align: center;
            color: #fff;
            opacity: 0;
            font-size: 20px;
            background-color: rgba(0,0,0,.5);
            transition: opacity .3s;
            &:hover {
              opacity: 1;
            }
          }
          .avatar {
            width: 100%;
            height: 100%;
          }
          .el-icon-delete {
            position: absolute;
            top: calc(50% - 10px);
            left: calc(50% - 10px);
          }
        }
        .avatar-loading-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
          border-radius: 6px;
          &:hover {
            color: $mainColor;
          }
        }
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          &:hover {
            border-color: $mainColor;
            color: $mainColor;
          }
        }
      }
      .form-item-left {
        width: 50%;
      }
      .form-item-right {
        width: 50%;
      }
    }
  }
</style>
